<template>
  <div class="wechat-login-container">
    <div class="login-box">
      <div class="qr-header">
        <div class="back-btn hover-scale" @click="$emit('back')">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回登录</span>
        </div>
        <div class="header-title">微信扫码登录</div>
      </div>
      
      <div class="qr-content">
        <div class="qr-wrapper">
          <div class="qr-loading" v-if="isLoading">
            <el-icon class="loading-icon"><Loading /></el-icon>
            <span>加载中...</span>
          </div>
          <img v-else src="../../views/login/二维码.png" alt="微信二维码" class="qr-code">
        </div>
        <p class="qr-tip">请使用微信扫描二维码登录</p>
        <div class="refresh-wrapper" v-if="isExpired">
          <p class="expired-tip">二维码已过期</p>
          <el-button type="primary" class="refresh-btn hover-scale" @click="refreshQrCode">
            <el-icon><Refresh /></el-icon>
            刷新二维码
          </el-button>
        </div>
      </div>
      
      <div class="login-footer">
        <img src="../../views/login/微信图标.png" alt="微信图标" class="wechat-logo">
        <p class="footer-tip">请确认是否为本人操作</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { ArrowLeft, Refresh, Loading } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const emit = defineEmits(['back', 'login-success']);

const qrCodeUrl = ref('');
const isLoading = ref(true);
const isExpired = ref(false);
let checkTimer = null;

// 获取二维码
const getQrCode = async () => {
  try {
    isLoading.value = true;
    isExpired.value = false;
    // 这里调用获取二维码的接口
    // const { data } = await getWechatQrCode();
    // qrCodeUrl.value = data.qrCode;
    
    // 模拟接口调用
    await new Promise(resolve => setTimeout(resolve, 1000));
    isLoading.value = false;
    // 不再需要设置 qrCodeUrl，因为我们直接使用静态图片
  } catch (error) {
    ElMessage.error('获取二维码失败，请重试');
    isLoading.value = false;
  }
};

// 检查登录状态
const checkLoginStatus = async () => {
  try {
    // 这里调用检查登录状态的接口
    // const { data } = await checkWechatLogin();
    // if (data.isLogin) {
    //   clearInterval(checkTimer);
    //   emit('login-success', data);
    // }
    // if (data.isExpired) {
    //   clearInterval(checkTimer);
    //   isExpired.value = true;
    // }
  } catch (error) {
    console.error('检查登录状态失败:', error);
  }
};

// 开始轮询检查登录状态
const startCheckLogin = () => {
  checkTimer = setInterval(checkLoginStatus, 2000);
};

// 刷新二维码
const refreshQrCode = () => {
  getQrCode();
};

onMounted(() => {
  getQrCode();
});

onUnmounted(() => {
  if (checkTimer) {
    clearInterval(checkTimer);
  }
});
</script>

<style lang="less" scoped>
.wechat-login-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .login-box {
    width: 100%;
    max-width: 400px;
    padding: 32px;
    
    .qr-header {
      display: flex;
      align-items: center;
      margin-bottom: 40px;
      
      .back-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #409EFF;
        cursor: pointer;
        font-size: 16px;
        transition: all 0.3s ease;
        
        .el-icon {
          font-size: 18px;
        }
        
        &:hover {
          transform: translateX(-5px);
          opacity: 0.8;
        }
      }
      
      .header-title {
        margin-left: auto;
        font-size: 24px;
        font-weight: 600;
        color: #1a1a1a;
      }
    }
    
    .qr-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 32px 0;
      
      .qr-wrapper {
        width: 200px;
        height: 200px;
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        
        .qr-loading {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          background-color: rgba(255, 255, 255, 0.9);
          
          .loading-icon {
            font-size: 32px;
            color: #409EFF;
            animation: rotate 1s linear infinite;
          }
          
          span {
            margin-top: 12px;
            color: #606266;
          }
        }
        
        .qr-code {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      
      .qr-tip {
        margin-top: 24px;
        color: #606266;
        font-size: 14px;
      }
      
      .refresh-wrapper {
        margin-top: 24px;
        text-align: center;
        
        .expired-tip {
          color: #f56c6c;
          margin-bottom: 12px;
        }
        
        .refresh-btn {
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }
    
    .login-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 32px;
      
      .wechat-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
        object-fit: contain;
      }
      
      .footer-tip {
        color: #909399;
        font-size: 14px;
      }
    }
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 